<template>
  <div>
    <el-form
      ref="authenticationFormRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="top"
    >   
      <div class="http-authentication">
        <el-form-item prop="authType" label="认证类型">
          <el-select
            v-model="formData.authType"
            placeholder="请选择认证类型"
            style="width: 100%;"
            clearable
          >
            <el-option label="无认证" value="none" />
            <el-option label="Basic认证" value="basic" />
            <el-option label="Bearer Token" value="bearer" />
            <el-option label="API Key" value="api_key" />
            <el-option label="OAuth 2.0" value="oauth2" />
            <el-option label="JWT" value="jwt" />
            <el-option label="HMAC" value="hmac" />
            <el-option label="AWS Signature" value="aws" />
          </el-select>
        </el-form-item>

        <!-- Basic Auth -->
        <template v-if="formData.authType === 'basic'">
          <el-form-item prop="basicAuthLocation">
            <el-select v-model="formData.basicAuthLocation" placeholder="传参位置">
              <el-option label="Header" value="header" />
              <el-option label="Query参数" value="query" />
            </el-select>
          </el-form-item>
    
          <el-form-item 
            prop="basicAuthHeaderKey" 
            v-if="formData.basicAuthLocation === 'header'"
          >
            <el-input v-model="formData.basicAuthHeaderKey" placeholder="Header Key（默认：Authorization）" />
          </el-form-item>
          <el-form-item 
            prop="basicAuthQueryKey" 
            v-if="formData.basicAuthLocation === 'query'" >
            <el-input v-model="formData.basicAuthQueryKey" placeholder="Query 参数名（如：auth）" />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="basicAuthUsername" >
                <el-input v-model="formData.basicAuthUsername" placeholder="username" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="basicAuthPassword" >
                <el-input v-model="formData.basicAuthPassword" placeholder="password" show-password />
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <!-- Bearer Token -->
        <template v-if="formData.authType === 'bearer'">
          <el-form-item prop="bearerTokenLocation" >
            <el-select v-model="formData.bearerTokenLocation" placeholder="传参位置">
              <el-option label="Header" value="header" />
              <el-option label="Query参数" value="query" />
              <el-option label="Cookie" value="cookie" />
            </el-select>
          </el-form-item>
          <el-form-item 
            prop="bearerTokenHeaderKey" 
            v-if="formData.bearerTokenLocation === 'header'"
          >
            <el-input v-model="formData.bearerTokenHeaderKey" placeholder="Header Key（默认：Authorization）" />
          </el-form-item>
          <el-form-item 
            prop="bearerTokenQueryKey" 
            v-if="formData.bearerTokenLocation === 'query'"
          >
            <el-input v-model="formData.bearerTokenQueryKey" placeholder="Query 参数名（如：access_token）" />
          </el-form-item>
          <el-form-item 
            prop="bearerTokenCookieKey" 
            v-if="formData.bearerTokenLocation === 'cookie'"
          >
            <el-input v-model="formData.bearerTokenCookieKey" placeholder="Cookie 名（如：token）" />
          </el-form-item>
          <el-form-item prop="authBearerFromRedisRead" >
            <el-radio-group v-model="formData.authBearerFromRedisRead">
              <el-radio :value="'0'">常量</el-radio>
              <el-radio :value="'1'">缓存</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item 
            prop="authBearerToken" 
            v-if="formData.authBearerFromRedisRead === '0'"
          >
            <el-input v-model="formData.authBearerToken" placeholder="Bearer Token" type="textarea" />
          </el-form-item>
          <el-form-item 
            prop="authBearerRedisReadKey" 
            v-if="formData.authBearerFromRedisRead === '1'"
          >
            <el-input v-model="formData.authBearerRedisReadKey" placeholder="Bearer Token 缓存标识" />
          </el-form-item>
        </template>

        <!-- API Key -->
        <template v-if="formData.authType === 'api_key'">
          <el-form-item prop="apiKeyLocation" label="传参位置">
            <el-select v-model="formData.apiKeyLocation">
              <el-option label="Header" value="header" />
              <el-option label="Query参数" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item 
            prop="apiKeyHeaderKey" 
            v-if="formData.apiKeyLocation === 'header'"
          >
            <el-input v-model="formData.apiKeyHeaderKey" placeholder="Header Key（默认：X-API-Key）" />
          </el-form-item>
          <el-form-item 
            prop="apiKeyQueryKey" 
            v-if="formData.apiKeyLocation === 'query'"
          >
            <el-input v-model="formData.apiKeyQueryKey" placeholder="Query 参数名（如：api_key）" />
          </el-form-item>
          <el-form-item prop="apiKeyValue" label="API Key 值">
            <el-input v-model="formData.apiKeyValue" placeholder="API Key 值" />
          </el-form-item>
        </template>

        <!-- OAuth 2.0 -->
        <template v-if="formData.authType === 'oauth2'">
          <el-form-item prop="oauth2TokenLocation">
            <el-select v-model="formData.oauth2TokenLocation" placeholder="Token 传参位置">
              <el-option label="Header" value="header" />
              <el-option label="Query参数" value="query" />
              <el-option label="Cookie" value="cookie" />
            </el-select>
          </el-form-item>
          <el-form-item 
            prop="oauth2HeaderKey" 
            v-if="formData.oauth2TokenLocation === 'header'"
          >
            <el-input v-model="formData.oauth2HeaderKey" placeholder="Header Key（默认：Authorization）" />
          </el-form-item>
          <el-form-item 
            prop="oauth2QueryKey" 
            v-if="formData.oauth2TokenLocation === 'query'"
          >
            <el-input v-model="formData.oauth2QueryKey" placeholder="Query 参数名（如：access_token）" />
          </el-form-item>
          <el-form-item 
            prop="oauth2CookieKey" 
            v-if="formData.oauth2TokenLocation === 'cookie'"
          >
            <el-input v-model="formData.oauth2CookieKey" placeholder="Cookie 名（如：oauth_token）" />
          </el-form-item>
          <el-form-item prop="oauth2ClientId">
            <el-input v-model="formData.oauth2ClientId" placeholder="Client ID" />
          </el-form-item>
          <el-form-item prop="oauth2ClientSecret">
            <el-input v-model="formData.oauth2ClientSecret" placeholder="Client Secret" show-password />
          </el-form-item>
        </template>

        <!-- JWT -->
        <template v-if="formData.authType === 'jwt'">
          <el-form-item prop="jwtLocation">
            <el-select v-model="formData.jwtLocation" placeholder="传参位置">
              <el-option label="Header" value="header" />
              <el-option label="Query参数" value="query" />
              <el-option label="Cookie" value="cookie" />
            </el-select>
          </el-form-item>
          <el-form-item 
            prop="jwtHeaderKey" 
            v-if="formData.jwtLocation === 'header'"
          >
            <el-input v-model="formData.jwtHeaderKey" placeholder="Header Key（默认：Authorization）" />
          </el-form-item>
          <el-form-item 
            prop="jwtQueryKey" 
            v-if="formData.jwtLocation === 'query'"
          >
            <el-input v-model="formData.jwtQueryKey" placeholder="Query 参数名（如：jwt）" />
          </el-form-item>
          <el-form-item 
            prop="jwtCookieKey" 
            v-if="formData.jwtLocation === 'cookie'"
          >
            <el-input v-model="formData.jwtCookieKey" placeholder="Cookie 名（如：jwt_token）" />
          </el-form-item>
          <el-form-item prop="jwtToken">
            <el-input v-model="formData.jwtToken" placeholder="JWT Token" type="textarea" />
          </el-form-item>
        </template>

        <!-- HMAC -->
        <template v-if="formData.authType === 'hmac'">
          <el-form-item prop="hmacKeyLocation">
            <el-select v-model="formData.hmacKeyLocation" placeholder="Key 传参位置">
              <el-option label="Header" value="header" />
              <el-option label="Query参数" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item 
            prop="hmacHeaderKey" 
            v-if="formData.hmacKeyLocation === 'header'"
          >
            <el-input v-model="formData.hmacHeaderKey" placeholder="Header Key（默认：X-API-Key）" />
          </el-form-item>
          <el-form-item 
            prop="hmacQueryKey" 
            v-if="formData.hmacKeyLocation === 'query'"
          >
            <el-input v-model="formData.hmacQueryKey" placeholder="Query 参数名（如：api_key）" />
          </el-form-item>
          <el-form-item prop="hmacSignatureHeader">
            <el-input v-model="formData.hmacSignatureHeader" placeholder="签名 Header（默认：X-Signature）" />
          </el-form-item>
          <el-form-item prop="hmacSecret">
            <el-input v-model="formData.hmacSecret" placeholder="HMAC Secret Key" show-password />
          </el-form-item>
        </template>

        <!-- AWS Signature -->
        <template v-if="formData.authType === 'aws'">
          <el-form-item prop="awsSignatureLocation">
            <el-select v-model="formData.awsSignatureLocation" placeholder="签名传参位置">
              <el-option label="Header" value="header" />
              <el-option label="Query参数" value="query" />
            </el-select>
          </el-form-item>
          <el-form-item prop="awsSignatureKey">
            <el-input v-model="formData.awsSignatureKey" placeholder="签名参数名（默认：X-Amz-Signature）" />
          </el-form-item>
          <el-form-item prop="awsAccessKey">
            <el-input v-model="formData.awsAccessKey" placeholder="AWS Access Key ID" />
          </el-form-item>
          <el-form-item prop="awsSecretKey">
            <el-input v-model="formData.awsSecretKey" placeholder="AWS Secret Access Key" show-password />
          </el-form-item>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HttpAuthorizationField } from '@/components/DataWorkflow/types/data-collect.ts';
import { FormInstance, FormRules } from 'element-plus';

const props = defineProps<{ 
  data: HttpAuthorizationField
}>();

const authenticationFormRef = ref<FormInstance>();

const formRules = reactive<FormRules>({
  authType: [
    { required: true, message: '请输选择认证类型', trigger: 'blur' }
  ],
  basicAuthLocation: [
    { required: true, message: '请选择认证传参位置', trigger: 'blur' }
  ],
  basicAuthQueryKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  basicAuthUsername: [
    { required: true, message: '请输入接口认证用户名', trigger: 'blur' }
  ],
  basicAuthPassword: [
    { required: true, message: '请输入接口认证密码', trigger: 'blur' }
  ],
  
  bearerTokenLocation: [
    { required: true, message: '请选择认证传参位置', trigger: 'blur' }
  ],
  bearerTokenHeaderKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  bearerTokenQueryKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  bearerTokenCookieKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  authBearerFromRedisRead: [
    { required: true, message: '请选择认证参数值来源', trigger: 'blur' }
  ],
  authBearerToken: [
    { required: true, message: '请输入接口认证参数值', trigger: 'blur' }
  ],
  authBearerRedisReadKey: [
    { required: true, message: '请输入接口认证参数值缓存标识', trigger: 'blur' }
  ],
  
  // API Key
  apiKeyLocation: [
    { required: true, message: '请选择认证传参位置', trigger: 'blur' }
  ],
  apiKeyHeaderKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  apiKeyQueryKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  apiKeyValue: [
    { required: true, message: '请输入接口认证参数值', trigger: 'blur' }
  ],
  
  // OAuth 2.0
  oauth2TokenLocation: [
    { required: true, message: '请选择认证传参位置', trigger: 'blur' }
  ],
  oauth2HeaderKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  oauth2QueryKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  oauth2CookieKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  oauth2ClientId: [
    { required: true, message: '请输入接口认证客户端ID', trigger: 'blur' }
  ],
  
  // JWT
  jwtLocation: [
    { required: true, message: '请选择认证传参位置ID', trigger: 'blur' }
  ],
  jwtHeaderKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  jwtQueryKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  jwtCookieKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  jwtToken: [
    { required: true, message: '请输入接口认证参数值', trigger: 'blur' }
  ],
  
  // HMAC
  hmacKeyLocation: [
    { required: true, message: '请选择认证传参位置', trigger: 'blur' }
  ],
  hmacHeaderKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  hmacQueryKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  
  // AWS Signature
  awsSignatureLocation: [
    { required: true, message: '请选择认证传参位置', trigger: 'blur' }
  ],
  awsSignatureKey: [
    { required: true, message: '请输入接口认证传参标识', trigger: 'blur' }
  ],
  awsAccessKey: [
    { required: true, message: '请输入接口认证授权Key', trigger: 'blur' }
  ]
});

const formData = ref<HttpAuthorizationField>({ ...props.data });
const emit = defineEmits(['update:data']);
const validate = async (): Promise<boolean> => {
  if (!authenticationFormRef.value) return false
  try {
    await authenticationFormRef.value.validate()
    return true
  } catch {
    return false
  }
}

const getData =()=> {
	return formData.value;
}

defineExpose({
  validate,
  getData
})
</script>